import { render } from '@testing-library/react';
import React from 'react';
import { Carousel } from 'antd';
import './hangye.scss'
import { Divider } from 'antd';
import { Link } from 'react-router-dom';
import $ from 'jquery'

import { Pagination } from 'antd';
function itemRender(current, type, originalElement) {
    if (type === 'prev') {
      return <a>上一页</a>;
    }
    if (type === 'next') {
      return <a>下一页</a>;
    }
    return originalElement;
  }
class Hangye extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            index: 0,
            arr: [
                {
                    img: require('../../img4/car.png').default,
                    tit: '同城汽车装饰中心', name: '李杰', phone: '19837643122', adress: '浙江省台州市温岭市人民西路281号'
                },
                {
                    img: require('../../img4/car.png').default,
                    tit: '同城汽车装饰中心', name: '李杰', phone: '19837643122', adress: '浙江省台州市温岭市人民西路281号'
                },
                {
                    img: require('../../img4/car.png').default,
                    tit: '同城汽车装饰中心', name: '李杰', phone: '19837643122', adress: '浙江省台州市温岭市人民西路281号'
                },
                {
                    img: require('../../img4/car.png').default,
                    tit: '同城汽车装饰中心', name: '李杰', phone: '19837643122', adress: '浙江省台州市温岭市人民西路281号'
                },
                {
                    img: require('../../img4/car.png').default,
                    tit: '同城汽车装饰中心', name: '李杰', phone: '19837643122', adress: '浙江省台州市温岭市人民西路281号'
                },
                {
                    img: require('../../img4/car.png').default,
                    tit: '同城汽车装饰中心', name: '李杰', phone: '19837643122', adress: '浙江省台州市温岭市人民西路281号'
                },
                {
                    img: require('../../img4/car.png').default,
                    tit: '同城汽车装饰中心', name: '李杰', phone: '19837643122', adress: '浙江省台州市温岭市人民西路281号'
                },
                {
                    img: require('../../img4/car.png').default,
                    tit: '同城汽车装饰中心', name: '李杰', phone: '19837643122', adress: '浙江省台州市温岭市人民西路281号'
                },
                {
                    img: require('../../img4/car.png').default,
                    tit: '同城汽车装饰中心', name: '李杰', phone: '19837643122', adress: '浙江省台州市温岭市人民西路281号'
                },
                {
                    img: require('../../img4/car.png').default,
                    tit: '同城汽车装饰中心', name: '李杰', phone: '19837643122', adress: '浙江省台州市温岭市人民西路281号'
                },
            ],
            tab: [{
                p: '欧洲进口', p2: '', tab1: ['纺织品', '衣帽鞋袜', '五金', '金属制品', '塑料制品', '电器制品', '高级装饰玻璃']
            },
            {
                p: '建材装修', p2: '', tab1: ['手机商家', '电脑配件', '厨房电器件', '智能生活', '个护保健', '显示器', '油烟机']
            },
            {
                p: '休闲娱乐', p2: '', tab1: ['手机商家', '电脑配件', '厨房电器件', '智能生活', '个护保健', '显示器', '油烟机']
            },
            {
                p: '生活服务', p2: '', tab1: ['手机商家', '电脑配件', '厨房电器件', '智能生活', '个护保健', '显示器', '油烟机']
            },
            {
                p: '3C市场', p2: '', tab1: ['手机商家', '电脑配件', '厨房电器件', '智能生活', '个护保健', '显示器', '油烟机']
            },
            {
                p: '丽人', p2: '', tab1: ['手机商家', '电脑配件', '厨房电器件', '智能生活', '个护保健', '显示器', '油烟机']
            },
            {
                p: '本地生活', p2: '', tab1: ['手机商家', '电脑配件', '厨房电器件', '智能生活', '个护保健', '显示器', '油烟机']
            },
            {
                p: '购物', p2: '', tab1: ['手机商家', '电脑配件', '厨房电器件', '智能生活', '个护保健', '显示器', '油烟机']
            },
            {
                p: '电子数码', p2: '', tab1: ['手机商家', '电脑配件', '厨房电器件', '智能生活', '个护保健', '显示器', '油烟机']
            },
            {
                p: '服装市场', p2: '', tab1: ['手机商家', '电脑配件', '厨房电器件', '智能生活', '个护保健', '显示器', '油烟机']
            },

            ],

        }
    }
    onhandleEnter(e) {
        $('.hangyetab').removeClass('hider');
        //    console.log(e.target.innerText);
        for (var i = 0; i < this.state.tab.length; i++) {

            // $('.hangyeli p').css({color:'#333333',textDecoration:'none'});
            if (e.target.innerText === this.state.tab[i].p) {
                this.setState({
                    index: i
                })
            }
        }

    }
    onhandleLeave() {
        $('.hangyetab').addClass('hider');
    }
    enterer() {
        $('.hangyetab').removeClass('hider');
    }
    leaveve() {
        $('.hangyetab').addClass('hider');
    }
    xuanzhong(e) {
        $('.hangyeli p').css({ color: '#333333', textDecoration: 'none' });
        console.log(e.target);
        $(e.target).css({ color: '#f60', textDecoration: 'underline' });
        $('.hangyetab').addClass('hider');
        // $(e.target)
        // $('.hangyeli p').css({color:'#333333',textDecoration:'none'});
        var arr1 = this.state.tab;
        arr1[this.state.index].p2 = ' > ' + e.target.innerText;

        this.setState({
            tab: arr1
        })

    }
    tiao() {
        window.location = 'http://localhost:3000/#/goods'
    }
    render() {
        return (<div>
            <Carousel autoplay className="jingtou">
                <div><img src={require('../../img4/hangyeshangjia.png').default} alt="" /></div>
                <div><img src={require('../../img4/banner.png').default} alt="" /></div>
                <div><img src={require('../../img4/hangyeshangjia.png').default} alt="" /></div>
                <div><img src={require('../../img4/banner.png').default} alt="" /></div>
            </Carousel>
            <div className="hangyetitwai" onClick={this.tiao.bind(this)}>
                <div className="hangyetit">
                    <p>我是商家，点击查看如何加入易和商城</p>
                </div>
            </div>

            <div className="hangyelogowai">
                <div className="hangyelogo">
                    <div>
                        <img src={require('../../img4/YiHe-Seller--.png').default} alt="" />
                    </div>
                    <div className="paixu">
                        <button>销量</button>
                        <button>评分</button>
                        <button>默认</button>
                    </div>
                </div>
            </div>
            <div className="hangyecontwai">
                <div className="hangyecont">
                    <ul className="hangyetable">{
                        this.state.tab.map((item, index) => {
                            return (
                                <li key={index} onMouseEnter={this.onhandleEnter.bind(this)} onMouseLeave={this.onhandleLeave.bind(this)}>
                                    <p>{item.p}<span>{item.p2}</span></p>
                                    <img src={require('../../img4/right.png').default} alt="" />
                                </li>
                            )
                        })
                    }
                    </ul>

                    <div className="hangyetab hider" onMouseEnter={this.enterer} onMouseLeave={this.leaveve}>
                        <div className="hangyeli">
                            {this.state.tab[this.state.index].tab1.map((item, index) => {
                                return (
                                    <p onClick={this.xuanzhong.bind(this)} key={index}>{item}</p>
                                )
                            })

                            }

                        </div>
                    </div>
                    <div className="jingpu1">
                        <div className="jingpubu1">{this.state.arr.map((item, index) => {
                            return (
                                <div className="jingliu1" key={index}>
                                    <div className="car">
                                        <img src={item.img} alt="" />

                                        <div className="jingtit">
                                            <p>{item.tit}</p>
                                        </div>
                                    </div>
                                    <div className="jingicon">
                                        <p>{item.name + index}</p>
                                    </div>
                                    <div className="jingphone">
                                        <p>{item.phone}</p>
                                    </div>
                                    <div className="jinglocat">
                                        <p>{item.adress}</p>
                                    </div>
                                </div>
                            )
                        })

                        }
                        </div>

                        <div className="fenye">
                    <Link to="###">首页</Link>
                    <Pagination showSizeChanger={false} showQuickJumper total={500} itemRender={itemRender} />
                    <Link to="###">确定</Link>
                    <span>共500条</span>
                </div>

                    </div>



                    {/* <Divider dashed /> */}
                </div>
            </div>


        </div>)
    }
}
export default Hangye;
